
<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	    <title>宠物纪念 - 贝贝</title>
	    <style>
	        * {
	            margin: 0;
	            padding: 0;
	            box-sizing: border-box;
	            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	        }
	        body {
	            background-color: #fff;
	            color: #333;
	            overflow-x: hidden;
	        }
	        .container {
	            width: 100%;
	            max-width: 100vw;
	            min-height: 100vh;
	            display: flex;
	            flex-direction: column;
	        }
	        /* 顶部固定区域 */
	        .header {
	            position: relative;
	            top: 0;
	            left: 0;
	            width: 100%;
	            background-color: #fff;
	            padding: 15px 20px;
	            display: flex;
	            justify-content: center;
	            align-items: center;
	            z-index: 100;
	        }
	        .header-icon {
	            width: 160px;
	            height: 20px;
	        }
	        /* 中间图片区域 */
	        .image-container {
	            position: relative;
	            width: 100%;
	            height: 540px;
	            overflow: hidden;
	        }
	        .pet-image {
	            width: 100%;
	            height: 100%;
	            object-fit: cover;
	            object-position: center;
	        }
	        /* 图片底部渐变遮罩 */
	        .image-overlay {
	            position: absolute;
	            bottom: 0;
	            left: 0;
	            width: 100%;
	            height: 100px;
	            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
	            pointer-events: none;
	        }
	        /* 音乐开关 */
	        .music-toggle {
	            position: absolute;
	            top: 15px;
	            right: 15px;
	            width: auto;
	            height: 40px;
	            display: flex;
	            flex-direction: row;
	            justify-content: center;
	            align-items: center;
	            cursor: pointer;
	            z-index: 20;
	            gap: 16px; /* 让提示和icon间距16px */
	        }
	        .music-toggle img {
                width: 24px;
                height: 24px;
                display: block;
            }
			.music-toggle:active {
                transform: scale(0.95);
            	transition: transform 0.1s;
			}
	        /* 宠物基本信息 */
	        .pet-info {
	            position: absolute;
	            bottom: 32px;
	            left: 24px;
	            color: white;
	            z-index: 5;
	            text-align: left;
	            display: flex;
	            flex-direction: column;
	            gap: 6px;
	        }
	        .pet-name {
	           color: var(---2, #CEEB9E);
               text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30);
               font-size: 28px;
               font-style: normal;
               font-weight: 700;
               line-height: normal;
               text-transform: capitalize;
	        }
	        .pet-details {
               color: #FFF;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
               line-height: normal;
               text-transform: capitalize;
               display: flex;
               flex-direction: column;
               gap: 4px; /* 增加行间距 */
			}
			.pet-meta {
				display: flex;
				gap: 12px;
				align-items: center;
			}
			.meta-divider {
				width: 1px;
				height: 14px;
				background-color: #fff;
				opacity: 0.4;
			}
	        /* 底部文字描述区域 */
	        .description {
	            padding: 24px 30px;
	            text-align: center;
	            background-color: #fff;
	            position: relative;
	            z-index: 2;
	        }
	        .description-text {
                color: var(---2, #3D3323);
                text-align: center;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 160%; /* 22.4px */
				letter-spacing: 1.4px;
	        }
			.brand-logo {
	            width: 85px;
	            height: 20px;
	            margin-bottom: 5px;
	        }
			.copyright-text {
                opacity: 0.3;
				white-space: nowrap;
			}
	        .footer {
                color: var(---2, #3D3323);
                text-align: center;
                font-family: "Helvetica Neue";
                font-size: 11px;
                font-style: normal;
                font-weight: 400;
                line-height: 160%; /* 17.6px */
                text-transform: capitalize;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
	        }
			.footer-wrapper {
				margin-top: 50px;
			}
			.music-tip {
                color: #fff;
                font-size: 13px;
                background: rgba(0,0,0,0.45);
                border-radius: 12px;
                padding: 4px 12px;
                animation: shakeX 1.2s infinite;
                display: inline-block;
                white-space: nowrap;
                margin: 0; /* 移除右边距，避免叠加 */
            }
            @keyframes shakeX {
                0%, 100% { transform: translateX(0); }
                10%, 30%, 50%, 70%, 90% { transform: translateX(-1px); }
                20%, 40%, 60%, 80% { transform: translateX(1px); }
            }
	    </style>
	</head>
	<body>
	    <div class="container">
	        <!-- 顶部固定区域 -->
	        <div class="header">
	            <div class="header-icon">
	                <img src="https://cdn.jsdelivr.net/gh/pppppppppp2/pet-memorial@main/icons/title.svg" alt="logo" class="header-icon" style="margin-right:8px;vertical-align:middle;">
	            </div>
	        </div>
	        <!-- 中间图片区域 -->
	        <div class="image-container">
	            <img src="https://cdn.jsdelivr.net/gh/pppppppppp2/pet-memorial@main/photos/贝贝.jpg" alt="宠物照片" class="pet-image">
	            <!-- 图片底部渐变遮罩 -->
	            <div class="image-overlay"></div>
	            <!-- 音乐开关 -->
	            <div class="music-toggle" id="musicToggle">
    <span class="music-tip">点击听听ta的呼噜声 👉</span>
    <img
      id="musicIcon"
      src="https://cdn.jsdelivr.net/gh/pppppppppp2/pet-memorial@main/icons/music-on.svg"
      alt="音乐开关"
      style="width:24px;height:24px;"
    >
</div>
	            <!-- 宠物基本信息 - 左下角且左对齐 -->
	            <div class="pet-info">
	                <div class="pet-name">贝贝</div>
	                <div class="pet-details">
	                    <div> 2014/03/16 ～ 2024/08/15</div>
	                    <div class="pet-meta">
	                        <span>中华田园犬</span>
	                        <span class="meta-divider"></span>
	                        <span>男孩</span>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <!-- 底部文字描述区域 -->
	        <div class="description">
	            <div class="description-text-wrapper">
	                <p class="description-text">
	                    谢谢你陪我走过的每一天<br>
	                    永远爱你
	                </p>
	            </div>
	            <div class="footer-wrapper">
	                <div class="footer">
	                    <img src="https://cdn.jsdelivr.net/gh/pppppppppp2/pet-memorial@main/icons/logo.svg" alt="logo" class="brand-logo">
	                    <span class="copyright-text">© 2025 Purr Land All Rights Reserved</span>
	                </div>
	            </div>
	        </div>
	    </div>
	    <!-- 背景音乐 -->
	    <audio id="bgMusic" loop>
	        <source src="https://cdn.jsdelivr.net/gh/pppppppppp2/pet-memorial@main/Rememberme.mp3" type="audio/mpeg">
	        您的浏览器不支持音频元素。
	    </audio>
	    <script>
	        document.addEventListener('DOMContentLoaded', function() {
	            // 获取音乐元素和开关
	            const bgMusic = document.getElementById('bgMusic');
	            const musicToggle = document.getElementById('musicToggle');
	            const musicIcon = document.getElementById('musicIcon');
	            const musicTip = document.querySelector('.music-tip');
	            const musicOnSrc = 'https://cdn.jsdelivr.net/gh/pppppppppp2/pet-memorial@main/icons/music-on.svg';
                const musicOffSrc = 'https://cdn.jsdelivr.net/gh/pppppppppp2/pet-memorial@main/icons/music-off.svg';

	            // 设置音乐图标状态
                function setMusicIcon(isPlaying) {
                    musicIcon.src = isPlaying ? musicOnSrc : musicOffSrc;
                }
            
                // 初始化时显示关闭状态
                setMusicIcon(false);

	            //musicToggle.addEventListener('touch', function() {
	            //    if (bgMusic.paused) {
	            //        bgMusic.play().then(function() {
	            //            setMusicIcon(true);
	            //            if (musicTip) musicTip.style.display = 'none'; // 隐藏提示
	            //        }).catch(function(error) {
	            //            console.log('播放失败:', error);
	            //        });
	            //    } else {
	            //        bgMusic.pause();
	            //        setMusicIcon(false);
	            //    }
	            //});

				// 使用touch事件代替click
				musicToggle.addEventListener('touchstart', function(e) {
    				e.preventDefault();
    				touchStartTime = Date.now();
				});

				musicToggle.addEventListener('touchend', function(e) {
    				e.preventDefault();
    				if (Date.now() - touchStartTime > 500) return;
                    handleMusicToggle();
				});

				function handleMusicToggle() {
    				if (bgMusic.paused) {
        				const playPromise = bgMusic.play();
                        setMusicIcon(true);
                        if (musicTip) musicTip.style.display = 'none'; // 隐藏提示
        
        				if (playPromise !== undefined) {
            				playPromise.then(() => {
                				// 播放成功处理
            				}).catch(error => {
                				// 提供用户手动修复选项
                				if (confirm('音乐播放被阻止，是否尝试手动启用？')) {
                    				bgMusic.play().catch(e => {
                        				showStatusMessage('播放失败: ' + e.message);
                    				});
                				}
            				});
        				}
    				} else {
                        bgMusic.pause()
                        setMusicIcon(false);
        				// 暂停处理
    				}
				}

	            // 自动播放时设置图标
	            function playMusic() {
	                bgMusic.play().then(function() {
	                    setMusicIcon(true);
	                }).catch(function(error) {
	                    setMusicIcon(false);
	                    console.log('自动播放失败:', error);
	                });
	            }

	            // 处理图片加载和裁剪
	            const petImage = document.querySelector('.pet-image');
	            petImage.addEventListener('load', function() {
	                // 图片加载完成后，确保它正确显示
	                const container = document.querySelector('.image-container');
	                const containerRatio = container.clientWidth / container.clientHeight;
	                const imageRatio = petImage.naturalWidth / petImage.naturalHeight;
	                // 如果图片太长，object-fit: cover 会自动裁剪
	                if (imageRatio > containerRatio) {
	                    petImage.style.objectPosition = 'center top';
	                }
	            });
	        });
	    </script>
	</body>
	</html>
